<template>
	<view class="container">
		<view class="inputContainer">
			<view class="inputTitle">原密码:</view>
			<input type="password" class="input" placeholder="请输入原密码" v-model="oldPassWord" focus="true" :maxlength="maxLength">
		</view>
		<view class="inputContainer2">
			<view class="inputTitle">新密码:</view>
			<input type="password" class="input" placeholder="请输入新密码" v-model="newPassWord" :maxlength="maxLength">
		</view>
		<view class="btnContainer">
			<button class="btn" @click="submit()">修改</button>
		</view>
	</view>
</template>

<script>
	import * as api from '../config/api.js'
	export default {
		data(){
			return{
				// 最大输入长度
				maxLength:20,
				oldPassWord:"",
				newPassWord:""
			}
		},
		onLoad() {
			// let leaveUserNum = uni.getStorageSync('leaveUserNum');
			// console.log(leaveUserNum)
		},
		methods:{
			submit(){
				// 获取新旧密码进行判断修改
				let oldP = this.oldPassWord
				let newP = this.newPassWord
				if(oldP == '' || newP == ''){
					uni.showToast({
						title:"请输入密码",
						icon:"none"
					})
				}else{
					let TPWD = uni.getStorageSync('leaveUser').leaveUserPwd
					let leaveUserNum = uni.getStorageSync('leaveUserNum');
					
					// console.log(TPWD)
					if(oldP == TPWD){
						// console.log("旧密码正确，可以修改")
						// 发送请求
						api.modifyMiApi(leaveUserNum,newP,{
							data:{},
							success:res=>{
								if(res.code == 200){
									console.log("成功")
									console.log(res)
									// 修改成功之后退出登陆,修改缓存
									// 不修改了，缓存没有密码，直接退出登陆清理缓存
									uni.clearStorage();
									uni.redirectTo({
										url:'/pages/index/login'
									})
								}else{
									uni.showToast({
										title:"修改失败",
										icon:"none"
									})
								}
								
							},
							fail:err=>{
								uni.showToast({
									title:"网络延迟",
									icon:"none"
								})
							}
						})
					}else{
						uni.showToast({
							title:"密码不正确，请重新输入",
							icon:"none"
						})
						// 清空数据
						this.oldPassWord = ''
					}
				}
			}
		}
	}
</script>

<style>
	page{
		width: 100%;
		height: 100%;
	}
	.container{
		width: 100%;
		height: 100%;
		padding-top: 20upx;
		/* background-color: #0081FF; */
	}
	.inputContainer{
		width: 100%;
		height: 90upx;
		padding-top: 10upx;
		background-color: white;
		padding: 10upx 0upx 5upx 10upx;
		display: flex;
		border-radius: 0.3em;
	}
	.inputContainer2{
		width: 100%;
		height: 90upx;
		padding-top: 10upx;
		background-color: white;
		padding: 10upx 0upx 5upx 10upx;
		margin-top: 20upx;
		display: flex;
		border-radius: 0.3em;
	}
	.inputTitle{
		width: 120upx;
		height: 70upx;
		font-size: 36upx;
		font-weight: 600;
		line-height: 70upx;
	}
	.input{
		width: 60%;
		height: 70upx;
	}
	.numContainer{
		width: 80upx;
		height: 40upx;
		font-size: 28upx;
		float: right;
		margin-top: -28upx;
	}
	.btnContainer{
		margin-top: 100upx;
		width: 100%;
	}
	.btn{
		width: 40%;
		font-size: 40upx;
		height: 80upx;
		line-height: 80upx;
		color: white;
		font-weight: 500;
		background-color: rgba(255, 0, 25, 1.0);
	}
</style>
